"use strict";
const canvas = document.getElementById("canvas1");
const context = canvas.getContext("2d");
context.lineWidth = 2;
//x , y raduis angle angel  顺时针还是逆时针默认顺  设置为true，则表示按照逆时针方向
// 绘制圆形
// context.arc(100, 100, 50, 0, Math.PI * 2)
// context.stroke()
// context.closePath()
// context.beginPath();
// 绘制半圆
// context.arc(200, 100, 50, 0, Math.PI /3);
// context.stroke();
// 逆时针绘制
// context.closePath();
// context.beginPath();
// context.arc(500, 100, 50, 0, Math.PI / 2, true)
// context.stroke();
// 绘制弧度
context.beginPath();
context.moveTo(0, 10); //起始点
// 各个参数含义和作用如下：
// x1Number
// 第1个控制点的横坐标。
// y1Number
// 第1个控制点的纵坐标。
// x2Number
// 第2个控制点的横坐标。
// y2Number
// 第2个控制点的纵坐标。
// radiusNumber
// 圆弧的半径大小。
context.arcTo(100, 400, 400, 20, 40); //绘制两个结束点
context.lineTo(400, 20);
context.stroke();
context.closePath();
// 绘制笑脸
context.beginPath();
// 可以利用moveTo设置起始点不用closepath
context.arc(75, 75, 50, 0, Math.PI * 2);
context.moveTo(110, 75);
context.arc(75, 75, 35, 0, Math.PI);
context.moveTo(65, 65);
context.arc(60, 65, 5, 0, Math.PI * 2);
context.moveTo(95, 65);
context.arc(90, 65, 5, 0, Math.PI * 2);
context.stroke();
